<template>
  <el-card>
    <div class="common-card">
      <div class="common-title">{{title}}</div>
      <div class="common-value">{{value}}</div>
      
      <div class="card-chart">
        <slot name="default">
        </slot>
      </div>

      <div class="card-line"></div>

      <div class="card-footer">
        <slot name="foot">
        </slot>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'CommonCard',
  // props:{
  //   title:{
  //     type:String,
  //     default:''
  //   },
  //   value:{
  //     type:String,
  //     default:''
  //   }
  // }
}
</script>

<script lang="ts" setup>
const props = defineProps(['title','value'])
</script>

<style lang="scss" scoped>
.common-card{
  .common-title{
    font-size:15px;
    color:#999;
  }
  .common-value {
    font-size:30px;
    margin: 5px 0;
  }
  .card-chart {
    height: 50px;
  }
  .card-line {
    border: 1px solid #eee;
    margin: 10px 0;
  }
  .card-footer {
    font-size:15px;
    color:#666
  }
}

</style>